<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="save" @close="close" :width="500">
        <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px" size="small">
            <el-form-item label="所属公司" prop="companyId" v-if="!editData.userId">
                <company-select v-model="formdata.companyId"/>
            </el-form-item>
            <el-form-item label="姓名" prop="nick">
                <el-input v-model="formdata.nick" placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="账号" prop="userName">
                <el-input v-model="formdata.userName" placeholder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="角色" prop="userRoleId">
                <role-select v-model="formdata.userRoleId"/>
            </el-form-item>
        </el-form>
    </c-dialog>
</template>
<script setup>
import { ref,onMounted,reactive } from 'vue';
import {addUser,editUser} from '@/api/system'
import cDialog from '@/components/custom/cDialog.vue'
import { message } from '@/utils/element'
import { ElMessageBox } from 'element-plus'
import companySelect from '@/components/custom/companySelect.vue'
import roleSelect from '@/components/custom/roleSelect.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object,
    type:Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show','success'])


const formdata = ref({})
const ruleFormRef = ref(null)

// 验证手机号
const checkPhone = (rule, phone, callback) => {
      const myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phone)) {
          return callback(new Error('手机号输入有误'))
      } else {
          callback() // 验证通过
      }
  }
const rules = reactive({
    companyId: [
        { required: true, message: '请选择所属公司', trigger: 'blur' },
        //{ min: 3, max: 50, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    nick:[
        { required: true, message: '请输入姓名', trigger: 'blur' },
    ],
    userName:[
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator:checkPhone, trigger: 'blur' }
    ],
    userRoleId:[
        { required: true, message: '请选择角色名称', trigger: 'blur' },
    ]
  })


onMounted(()=>{
    if(props.editData.id){
        formdata.value = props.editData
    }
})


const dialogFlag = ref(props.show)

const save = async() => {
    await ruleFormRef.value.validate(async(valid, fields) => {
        if (valid) {
          let res = {}
          if(props.editData.id){
            res = await editUser(formdata.value)
          }else{
            res= await addUser(formdata.value)
          }
          if(res.code ==0 || res.success){
            message('数据提交成功',2)
            emit('success')
            close()
          }else{
            message(res.message,3)
          }
        } 
    })
}


const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
    .addBox{
        display: flex;
        height: 40px;
        line-height: 30px;
        .label{
            width: 70px;
        }
    }
</style>
